<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳一跳闯关游戏</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        #game-area {
            width: 800px;
            height: 400px;
            background: #87CEEB;
            position: relative;
            overflow: hidden;
            margin: 50px auto;
            border: 3px solid #333;
        }

        #player {
            width: 40px;
            height: 40px;
            background: #FF4500;
            position: absolute;
            bottom: 50px;
            left: 100px;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .obstacle {
            width: 30px;
            height: 40px;
            background: #4B0082;
            position: absolute;
            right: -30px;
            bottom: 50px;
            animation: moveLeft 3s linear infinite;
        }

        @keyframes jump {
            0% { transform: translateY(0); }
            50% { transform: translateY(-220px); }
            100% { transform: translateY(0); }
        }

        @keyframes moveLeft {
            from { right: -30px; }
            to { right: 800px; }
        }
    </style>
</head>
<body>
    <div id="game-area">
        <div id="player"></div>
    </div>
    <p style="text-align: center;font-size: 20px;">按空格键跳跃，当前得分：00</p>
    <p style="text-align: center;font-size: 26px;color: red;" id="msg"></p>
    <button id="jump-btn" style="display: block; margin: 20px auto; padding: 10px 20px; font-size: 18px; cursor: pointer;
    background: rgba(76, 201, 240, 0.1);
    border-radius: 5px;
    border: 2px solid #4cc9f0;">跳跃</button>
    <script>
const gameArea = document.getElementById('game-area');
const player = document.getElementById('player');
let isJumping = false;
let score = 0;
let collisionCount = 0; // 增加触碰障碍物的计数器

const obstacles = [];

function createObstacle() {
    if (obstacles.length >= 3) return; // 限制最多 5 个障碍物

    const obstacle = document.createElement('div');
    obstacle.className = 'obstacle';
    obstacle.style.animationDuration = (3 - score * 0.1) + 's'; // 根据得分调整速度
    if (obstacle.style.animationDuration < '1s') {
        obstacle.style.animationDuration = '1s'; // 速度最小值为 1 秒
    }
    gameArea.appendChild(obstacle);
    obstacles.push(obstacle);

    // 碰撞检测
    const checkCollision = setInterval(() => {
        const playerRect = player.getBoundingClientRect();
        const obstacleRect = obstacle.getBoundingClientRect();

        if (
            playerRect.left < obstacleRect.right &&
            playerRect.right > obstacleRect.left &&
            playerRect.top < obstacleRect.bottom &&
            playerRect.bottom > obstacleRect.top
        ) {
            collisionCount++; // 增加触碰次数
            if (collisionCount >= 8) { // 检查触碰次数是否达到8次
                document.getElementById('msg').innerHTML = `游戏结束！得分：${score}`;
                clearInterval(checkCollision);
                obstacles.forEach(ob => ob.remove());
                obstacles.length = 0;
            }
        }
    }, 10);

    // 移除障碍物
    obstacle.addEventListener('animationend', () => {
        console.log('移除障碍物');
        if (obstacle.parentNode) {
            obstacle.parentNode.removeChild(obstacle); // 确保障碍物从DOM中移除
        }
        score++;
        document.querySelector('p').innerHTML = `按空格键跳跃，当前得分：${score}`; // 更新得分显示
        clearInterval(checkCollision);
        const index = obstacles.indexOf(obstacle);
        if (index !== -1) obstacles.splice(index, 1); // 从数组中移除
    });
}

// 跳跃控制
function jump() {
    if (!isJumping) {
        isJumping = true;
        player.style.animation = 'jump 0.8s';
        setTimeout(() => {
            player.style.animation = '';
            isJumping = false;
        }, 800);
    }
}

// 键盘事件监听
document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
        e.preventDefault();
        jump();
    }
});

// 游戏初始化
setInterval(createObstacle, 2000);

document.getElementById('jump-btn').addEventListener('click', () => {
    jump();
});
    </script>
</body>
</html>